<template>
  <div class="paddingCard">
    <pageTools :show-before="true">
      <template #before>
        <el-button type="primary" size="small" @click="isShowDialog=true">添加分类</el-button>
      </template>

      <template #after>
        <el-input v-model="title_contains" placeholder="请输入关键字" @input="inputSearch" @keyup.enter="search" />
        <el-button class="el-icon-search" @click="search" />
      </template>

      <template #content>
        <div class="hr">
          <hr>
        </div>
        <el-table :data="classList" border>
          <el-table-column label="图片">
            <template v-slot="{row}">
              <el-image :src="row.image" />
            </template>
          </el-table-column>
          <el-table-column label="标题" prop="title" />
          <el-table-column label="介绍" prop="desc" />
          <el-table-column label="操作">
            <template v-slot="{row}">
              <el-button type="primary" @click="editClass(row.id)">编辑</el-button>
              <el-button type="danger" @click="delClass(row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>

        <el-row type="flex" justify="center">
          <el-pagination
            :page-size="pageConfig._limit"
            :total="total"
            @current-change="currentChange"
          />
        </el-row>
      </template>
    </pageTools>

    <el-dialog :title="formData.id? '修改分类':'新增分类'" :visible="isShowDialog" @close="btnCalcel">
      <el-form ref="addForm" :model="formData" :rules="rules">
        <el-form-item label="标题" prop="title">
          <el-input v-model="formData.title" style="width: 90%" />
        </el-form-item>

        <el-form-item label="描述" prop="desc">
          <el-input v-model="formData.desc" style="width: 90%" />
        </el-form-item>

        <updateImage ref="userImage" />
      </el-form>

      <el-row type="flex" justify="center">
        <el-button type="primary" @click="btnOk">确认</el-button>
        <el-button @click="btnCalcel">取消</el-button>
      </el-row>
    </el-dialog>

  </div>
</template>

<script>
import { classList, getTotal, delClass, getClassById, addClass, editData } from '@/api/sortManage'
import updateImage from '@/components/updateImage'
export default {
  components: {
    updateImage
  },
  data() {
    return {
      classList: [],
      total: 1,
      pageConfig: {
        _limit: 2,
        _start: 0
      },
      isShowDialog: false,
      title_contains: '',
      page: '',
      id: '',
      formData: {
        title: '',
        desc: '',
        image: ''
      },
      rules: {
        title:
            [
              { required: true, message: '标题不能为空', trigger: 'blur' }
            ],
        desc:
            [
              { required: true, message: '描述不能为空', trigger: 'blur' }
            ],
        image:
            [
              { required: true, message: '图片不能为空', trigger: 'blur' }
            ]
      }
    }
  },
  created() {
    this.getList()
  },
  methods: {
    // 搜索的输入事件
    async inputSearch() {
      console.log(this.title_contains)
      if (this.title_contains === '') {
        this.getList()
      } else {
        this.pageConfig._start = 0
        this.classList = await classList({ _limit: this.pageConfig._limit, _start: this.pageConfig._start, title_contains: this.title_contains })
      }
    },
    // 获取到分类列表和分类的数量
    async getList() {
      const res = await classList(this.pageConfig)
      const total = await getTotal()
      this.classList = res.data
      this.total = total.data
    },
    // 到当前点击的页数
    currentChange(page) {
      this.page = page
      const pageLast = page - 1
      const size = pageLast * this.pageConfig._limit
      this.pageConfig._start = size
      this.getList()
    },
    // 搜索
    async search() {
      this.pageConfig._start = 0
      console.log(this.title_contains)
      const res = await classList({ _limit: this.pageConfig._limit, _start: this.pageConfig._start, title_contains: this.title_contains })
      const total = await getTotal({ title_contains: this.title_contains })
      this.total = total.data
      this.classList = res
    },
    // 删除
    async delClass(id) {
      await this.$confirm('您确定要删除吗？')
      await delClass(id)
      this.$message.success('删除成功')
      this.getList()
    },
    // 点击确认按钮
    async btnOk() {
      await this.$refs.addForm.validate()
      const img = this.$refs.userImage.fileList
      this.formData.image = img[0].url
      if (this.formData.id) {
        await editData(this.formData)
        this.$message.success('修改成功')
      } else {
        const page = this.total / 2 - 1
        this.page = page + 1
        const size = page * this.pageConfig._limit + 1
        this.pageConfig._start = size
        await addClass(this.formData)
        console.log(this.formData)
        this.$message.success('添加成功')
      }
      this.getList()
      this.isShowDialog = false
    },
    // 点击取消按钮
    btnCalcel() {
      this.$refs.addForm.validateField()
      this.$refs.userImage.fileList = []
      this.formData = {
        title: '',
        desc: '',
        image: ''
      }
      this.isShowDialog = false
    },
    // 编辑
    async editClass(id) {
      this.isShowDialog = true
      const res = await getClassById(id)
      this.formData = res.data
      this.formData.image !== '' ? this.$refs.userImage.fileList = [{ url: this.formData.image }] : ''
    }
  }
}
</script>

<style scoped>
  .paddingCard {
    margin: 10px;
  }
  .hr {
    padding-top: 20px;
    padding-bottom: 20px;
  }
</style>
